<template>
    <div class="container">
        <button @click="toggle">切换文本</button>
        <Transition name="fade">
            <p v-if="isVisible">这是一个可切换的文本！</p>
        </Transition>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(false);

const toggle = () => {
    isVisible.value = !isVisible.value;
}
</script>

<style scoped>
.container {
    text-align: center;
    margin-top: 50px;
    background-color: rgb(236, 236, 236);
    border-radius: 15px;
    padding: 10px;
    margin: 20px;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s; /* 设置过渡效果的持续时间 */
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0; /* 进入和离开时的透明度设置 */
}
/* 动画相关类解释
1. 进入动画相关类：
   - <Transition> 或 <TransitionGroup> 组件用于包裹需要添加动画的元素。
   - fade-enter-active: 在进入动画期间应用的类，用于定义过渡效果。
   - fade-enter-from: 定义元素进入时的初始样式，例如：opacity: 0。
   - fade-enter-to: 定义元素进入时的最终样式，默认情况下为 opacity: 1。
   
2. 离开动画相关类：
   - fade-leave-active: 在离开动画期间应用的类，用于定义过渡效果。
   - fade-leave-from: 定义元素离开时的初始样式，通常不需要显式定义。
   - fade-leave-to: 定义元素离开时的最终样式，例如：opacity: 0。
*/

</style>